<template>
  <view class="my-center pay-box">
    <view v-if="!isPaySuccess">
      <image class="pay-qr" :src="payQr" mode="scaleToFill" />
      <view class="tip">请截图到支付宝app支付</view></view
    >

    <view v-if="isPaySuccess" class="success result">
      <view class="success_tip">
        <uni-icons type="checkmarkempty" size="45" color="#5dbd1f"></uni-icons>
      </view>
      <text class="txt">支付成功</text>
      <text>3秒后自动返回</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import { onUnload } from '@dcloudio/uni-app'

import { useStore } from '@/store'
import { orderService } from '@/api'
const store = useStore()

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
  payQr: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const payQr = ref('')

const popup = ref()

const isPaySuccess = ref(false)

onMounted(async () => {
  const params = {
    buyerAddress: '泉州经贸学院',
    buyerName: 'cv法师',
    buyerPhone: '12345678901',
    buyerOpenid: '222',
    merchantId: '1',
    skuList: [] as Array<{ mark: string; number: number }>,
  }
  store.useOrderStore.selectGoods.forEach((v) => {
    params.skuList.push({
      mark: v.key,
      number: v.number,
    })
  })
  const res = (await orderService.createOrder(params)) as any

  if (res.code === 200) {
    payQr.value = res.data.qrImage as string
    queryOrderResult(res.data.orderId)
  }
})

let time: any = null
const queryOrderResult = (orderId: string) => {
  clearInterval(time)
  time = setInterval(async () => {
    const res = await orderService.queryOrderResult(orderId)
    console.log(res)
    if (res.code === 200) {
      isPaySuccess.value = true
      clearInterval(time)

      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/shopdetail/index?id=1',
        })
      }, 3000)
    }
  }, 2500)
}

onUnload(() => {
  clearInterval(time)
})

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.pay-box {
  justify-content: center;
  align-items: center;

  .pay-qr {
    width: 500rpx;
    height: 500rpx;
  }

  .tip {
    margin-top: 10rpx;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .result {
    width: 300rpx;
    height: 300rpx;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .success_tip {
      width: 100rpx;
      height: 100rpx;
      border: 10rpx solid #5dbd1f;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .txt {
      margin-top: 20rpx;
      font-size: 1rem;
    }
  }
}
</style>
